<template>
  <span>
    <el-upload
      :action="imgUrl"
      :headers="headers"
      :data="data"
      :list-type="listType"
      :show-file-list="showList"
      :class="{img: imgCount}"
      multiple
      :file-list="fileList"
      :on-preview="handlePreview"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="afterUpdate"
    >
      <i v-if="!isButton" class="el-icon-plus" />
      <el-button v-else size="small" type="primary">{{ btnTitle }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ info }}</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </span>
</template>
<script>
import { Message } from 'element-ui'
export default {

  props: {
    type: {
      type: String,
      default: ''
    },
    sum: {
      type: Number,
      default: 1
    },
    info: {
      type: String,
      default: ''
    },
    size: {
      type: Number,
      default: 2
    },
    files: {
      type: Array,
      default: () => []
    },
    isButton: {
      type: Boolean,
      default: false
    },
    listType: {
      type: String,
      default: 'picture-card'
    },
    showList: {
      type: Boolean,
      default: true
    },
    btnTitle: {
      type: String,
      default: '点击上传'
    }
  },

  data() {
    return {
      imgUrl: '',
      headers: {},
      fileList: [],
      dialogVisible: false,
      dialogImageUrl: '',
      data: {
      },
      fileSize: '',
      fileTypes: [
        '.jpg', '.jpeg', '.png', '.JPG', '.JPEG', '.PNG'
      ]
    }
  },

  computed: {
    file: function() {
      const fileArr = []
      this.fileList.filter(res => {
        if (res.response !== undefined) {
          const obj = {
            origin: res.response.origin,
            url: res.response.url
          }
          fileArr.push(obj)
        } else {
          const obj = {
            origin: res.origin,
            url: res.url
          }
          fileArr.push(obj)
        }
      })
      return fileArr
    },

    imgCount: function() {
      return this.fileList.length === this.sum
    }
  },

  watch: {
    files: function() {
      if (this.files.length !== 0) {
        this.fileList = this.files
        this.$emit('returnFile', this.file)
      }
    }
  },

  mounted() {
    this.imgUrl = process.env.VUE_APP_BASE_API + '/upload'
    this.headers['Authorization'] = 'Bearer' + this.$store.state.user.token
    this.data.type = this.type
  },

  methods: {
    beforeUpload(file) {
      const fileName = file.name
      const fileExt = this.getFileExt(fileName)
      const size = file.size
      if (!this.checkExt(fileExt)) {
        return this.error('图片格式不正确')
      }

      if (!this.checkSize(size)) {
        return this.error(`上传图片最大不能超过${this.size}MB`)
      }

      this.data.ext = fileExt
    },

    afterUpdate(response, file, fileList) {
      this.fileList = fileList
      this.$emit('returnFile', this.file)
    },

    handleRemove(file, fileList) {
      this.fileList = fileList
      this.$emit('returnFile', this.file)
    },

    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    error(message) {
      Message({
        message,
        type: 'error',
        duration: 2000
      })
      return false
    },

    getFileExt(fileName) {
      const tmpExt = /\.[^\.]+$/.exec(fileName)
      return tmpExt[tmpExt.length - 1].toLowerCase()
    },

    checkExt(ext) {
      if (this.fileTypes.indexOf(ext) >= 0) return true

      return false
    },

    checkSize(size) {
      if (this.size * 1024 * 1024 > size) return true

      return false
    }
  }

}
</script>
<style>
.img .el-upload--picture-card{
  display: none!important;
}
</style>
